I'm trying to create a button that makes an element disappear/reappear depending on whether the display property is equal "block" or "none" respectively. Here's what I tried:

// this is a function that executes when the button is pressed
{
  let a = document.getElementsByClassName("photo");
  // here a[0] returns the <img> that i want to delete/undelete but  
  // a[0].style.display returns an empty string
  if(a[0].style.display == "block") a[0].style.display = "none"; // so this doesnt work
  else if(a[0].style.display == "none") a[0].style.display = "block";
}

I managed to make it work by adding onLoad = "init()" property to the body tag. init() sets the image's display property to "block" when the page loads, as I understand, and that solved the issue but I want to understand why the display property didnt have a value initially.

Please note that I set the display property to "block" manually in css, although I don't think this should matter since img has a default display: inline, so a[0].style.display should return "inline" instead of an empty string.

This was my first question here so if there's something I should've done differently, please feel free to let me know :)